<template>
  <div>
    <a-row :gutter="24">
      <a-col :span="24">
        <a-card
          class="project-list"
          :loading="platformLoading"
          style="margin-bottom: 24px"
          :bordered="false"
          title="短信统计"
          :body-style="{ padding: 0 }"
        >
          <div class="extra-wrapper" slot="extra">
            <!-- <a-select
              style="width:200px"
              v-model="userId"
              show-search
              placeholder="qinshuru"
              :default-active-first-option="false"
              :show-arrow="false"
              :filter-option="false"
              :options="userList"
              @search="handleSearch"
            >
              <a-spin v-if="fetching" slot="notFoundContent" size="small" />
            </a-select> -->
            &nbsp;
            &nbsp;
            <a-range-picker :style="{ width: '256px' }" v-model="time" @change="handleChangeTime" />
          </div>
          <!-- <a slot="extra" href="#">more</a> -->
        </a-card>
      </a-col>
    </a-row>
    <a-row :gutter="24" :style="{ marginBottom: '24px'}">
      <a-col>
      <a-card :bordered="false">
        <a-row :gutter="24">
          <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
            <div class="awm-card-wrap">
              <div class="awm-card">
                <chart-card
                  title="发送总量"
                  :total="( info.failure || 0 ) + ( info.success || 0 ) + ( info.unknown || 0 )  | NumberFormat"
                  :hasContent="false"
                  :loading="platformLoading"
                  style="background-color:#38a1f2;color:#fff;"
                >
                  <!-- <a-tag slot="action">实时</a-tag> -->
                </chart-card>
              </div>
              <div class="awm-card">
                <chart-card
                  title="发送成功"
                  :total="info.success | NumberFormat"
                  :hasContent="false"
                  :loading="platformLoading"
                  style="background-color:#1bc98e;color:#fff;"
                >
                  <!-- <a-tag slot="action">实时</a-tag> -->
                </chart-card>
              </div>
              <div class="awm-card">
                <chart-card
                  title="发送失败"
                  :total="info.failure || 0  | NumberFormat"
                  :hasContent="false"
                  :loading="platformLoading"
                  style="background-color:#e64758;color:#fff;"
                >
                  <!-- <a-tag slot="action">实时</a-tag> -->
                </chart-card>
              </div>
              <div class="awm-card">
                <chart-card
                  title="发送未知"
                  :total="info.unknown || 0  | NumberFormat"
                  :hasContent="false"
                  :loading="platformLoading"
                  style="background-color:#c0c4cc;color:#fff;"
                >
                  <!-- <a-tag slot="action">实时</a-tag> -->
                </chart-card>
              </div>
               <div class="awm-card">
                <chart-card
                  title="待发送"
                  :total="info.wait || 0  | NumberFormat"
                  :hasContent="false"
                  :loading="platformLoading"
                  style="background-color:#FCB501;color:#fff;"
                >
                  <!-- <a-tag slot="action">实时</a-tag> -->
                </chart-card>
              </div>
              
            </div>
          </a-col>
        </a-row>
      </a-card>
      </a-col>
      <!-- <a-col :sm="24" :md="12" :xl="8" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="成功" :total="info.success | NumberFormat">
          <a-tooltip title="成功" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="8" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="失败" :total="info.failure | NumberFormat">
          <a-tooltip title="失败" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="8" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="未发送" :total="info.unknown | NumberFormat">
          <a-tooltip title="未发送" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
        </chart-card>
      </a-col> -->
    </a-row>
    <a-row :gutter="24" v-if="!isStudio">
      <a-col :sm="24" :md="24" :style="{ marginBottom: '24px' }">
        <a-card :bordered="false" title="近七天短信">
          <div style="height:300px;">
            <AWM-line :chartData="sevenData" :lineList="sevenLineParameter" name=""></AWM-line>
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import moment from 'moment'
import FinanceList from './modules/financeList.vue'
import { baseMixin } from '@/store/app-mixin'
import { getMSGStatistics } from '@/api/system'
import AWMPai from '@/components/AWMechart/pai'
import { mapGetters } from 'vuex'
import OutputModal from './modules/OutputModal'
import AWMLine from '@/components/AWMechart/line'
import {
  ChartCard
} from '@/components'
import { getUserList } from '@/api/login'

const outCol = [
  {
    title: '项目名称',
    dataIndex: 'projectName',
    key: 'projectName',
    // sorter: true,
  },
  {
    title: '完成时长',
    dataIndex: 'finishTimeLength',
    key: 'finishTimeLength',
    // sorter: true,
  },
  {
    title: '单价',
    dataIndex: 'uniPrice',
  },
  {
    title: '金额',
    dataIndex: 'outputPrice',
  },
]

export default {
  name: 'platform-Analysis',
  mixins: [baseMixin],
  components: {
    FinanceList,
    AWMPai,
    AWMLine,
    OutputModal,
    ChartCard
  },
  data() {
    return {
      outCol,
      time: null,
      startTime:'',
      endTime:'',
      userId:null,
      userList:[],
      fetching:false,
      platformLoading: true,
      finance: {},
      userNumList: [],
      studioNumList: [],
      epibolyCompanyNumList: [],
      clientNumList: [],
      projectNumList: [],
      filialeNumList: [],

      loading: true,
      //
      incomePieData: [],
      expensePieData: [],
      pieStyle: {
        stroke: '#fff',
        lineWidth: 1,
      },
      visible: false,
      confirmLoading: false,
      requireData: {},
      outList: [],
      output: {
        visible: false,
      },
      sevenData:[],
      sevenLineParameter: [
        { key: 'success', name: '成功' },
        { key: 'failure', name: '失败' },
        { key: 'unknown', name: '未发送' },
      ],
      info:{}
    }
  },
  filters: {
    lastList(list) {
      console.log(list)
      if (list.length && list.length != 0) {
        return list[list.length - 1].y
      } else {
        return ''
      }
    },
  },
  computed: {
    searchTableColumns() {
      return [
        {
          dataIndex: 'index',
          title: this.$t('dashboard.analysis.table.rank'),
          width: 90,
        },
        {
          dataIndex: 'keyword',
          title: this.$t('dashboard.analysis.table.search-keyword'),
        },
        {
          dataIndex: 'count',
          title: this.$t('dashboard.analysis.table.users'),
        },
        {
          dataIndex: 'range',
          title: this.$t('dashboard.analysis.table.weekly-range'),
          align: 'right',
          sorter: (a, b) => a.range - b.range,
          scopedSlots: { customRender: 'range' },
        },
      ]
    },

    ...mapGetters({ userInfo: 'userInfo' }),
    isStudio: function () {
      return this.userInfo.type == 4
    },
    isAll: function () {
      return this.userInfo.roleName == '工作室管理员'
    },
  },
  created() {
    setTimeout(() => {
      this.loading = !this.loading
    }, 1000)
    
  },
  mounted() {
    this.getAnalysis()
    this.handleSearch('',true)
  },
  methods: {
    handleSearch(val, a_init) {
      let data = { name: val, pageNum: 1, pageSize: a_init?10:100 }
        this.fetching = true
        getUserList(data).then((res) => {
          this.userList = res.data.data.map((v) => {
            return {
              label: v.name,
              value: v.id,
            }
          })
        }).finally(()=>this.fetching = false)
    },
    handleOutPutDetails() {
      this.output.visible = true
    },
    handleOutputCancel(){
      this.output.visible = false
    },
    handleClick(a_str) {
      console.log(a_str)
      this.$router.push(a_str)
    },
    
    handleChangeTime(val) {
      console.log(val)
      if (val[0]) {
        this.startTime = val[0].format('YYYY-MM-DD') + ' 00:00:00'
        this.endTime = val[1].format('YYYY-MM-DD') + ' 23:59:59'
      } else {
        this.startTime = ''
        this.endTime = ''
      }
      this.getAnalysis()
    },
    getAnalysis() {
      let { startTime, endTime } = this
      getMSGStatistics({ startTime, endTime }).then((res) => {
        let data = res.data
        let sevenData = []
        data.sevenInfo.reverse().forEach(v=>{
          sevenData.push({
              name: v.day.substr(0,10),
              success: v.success || 0,
              failure: v.failure || 0,
              unknown: v.unknown || 0,
            })
        })
        this.sevenData = sevenData
        this.info = data
          //近4月任务时长  赋值 start
            
      })
      .finally(()=>{
        this.platformLoading = false
      })
    },
    handleCancel() {
      this.visible = false
    },
    handleOk() {
      this.visible = false
    },
    handleOpenList(type, key) {
      let data = { type }
      data[key] = 1
      this.requireData = data
      this.visible = true
    },
    handleJump(a_scope) {
      let { requireData } = this
      let query = new Object(),
        path = ''
      for (let i in requireData) {
        console.log(i)
        if (i.indexOf('typeDetailBy') != -1) {
          query[i] = a_scope.id
        } else {
          path = requireData[i] == 1 ? '/finance/expend' : '/finance/income'
        }
      }
      this.startTime ? (query.startTime = this.startTime) : null
      this.endTime ? (query.endTime = this.endTime) : null
      this.$router.push({ path, query })
    },
  },
}
</script>

<style lang="less" scoped>
/deep/ .awm-card-body-btn {
  position: absolute;
  right: 24px;
  top: 24px;
}
.extra-wrapper {
  line-height: 32px !important;
  // padding-right: 24px;

  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a {
      margin-left: 24px;
    }
  }
}
.extra-wrapper {
  line-height: 55px;
  padding-right: 24px;

  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a {
      margin-left: 24px;
    }
  }
}

.antd-pro-pages-dashboard-analysis-twoColLayout {
  position: relative;
  display: flex;
  display: block;
  flex-flow: row wrap;
}

.antd-pro-pages-dashboard-analysis-salesCard {
  height: calc(100% - 24px);
  /deep/ .ant-card-head {
    position: relative;
  }
}

.dashboard-analysis-iconGroup {
  i {
    margin-left: 16px;
    color: rgba(0, 0, 0, 0.45);
    cursor: pointer;
    transition: color 0.32s;
    color: black;
  }
}
.analysis-salesTypeRadio {
  position: absolute;
  right: 54px;
  bottom: 12px;
}

.awm-card-wrap {
  display: flex;
  .awm-card {
    width: calc(25% - 12px);
    margin-right: 15px;
    margin-bottom: 24px;
    &.success{
      background-color: #0f0;
    }
    &:last-child {
      margin-right: 0;
    }
    /deep/.chart-card-footer{
      border-top:none;margin-top: 18px;
    }
  }
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
  .awm-card-wrap {
    flex-wrap: wrap;
    .awm-card {
      width: calc(33% - 12px);
      margin-right: 18px;
      &:nth-child(3n) {
        margin-right: 0;
      }
      &:last-child {
        margin-right: auto;
      }
    }
  }
}
@media screen and (max-width: 768px) {
  .awm-card-wrap {
    flex-wrap: wrap;
    .awm-card {
      width: calc(100%);
      margin-right: 0;
    }
  }
}
</style>
